var modalId=0;
var editor;
var editorArray=new Array();

//选择事件
function readingBtnSelect() {
    var id=$(this).parents(".modal").attr("id").substring(6);
    if(this.className==="btn btn-default btn-select"){
        this.className="btn btn-info btn-select";
        $(this).after("<input type='hidden' name='args["+id+"][questionanswer][]' class='questionanswer' value='"+this.innerHTML+"'>");
    }else {
        this.className="btn btn-default btn-select";
        $(this).nextAll().remove();
    }
}

/**
 * 初始化传入元素内的multipleInit选项
 * @param parent  传入一个js元素
 */
function multipleInit(parent) {
    parent=$(parent);
    var answer=parent.find(".multiple-answers");
    for(var i=0;i<4;i++){
        var node=document.createElement("div");
        node.className="set-select multiple-answer";
        node.innerHTML=multipleAnswer(String.fromCharCode("A".charCodeAt()+i),"args["+modalId+"][questionselect][]");
        answer.append(node);
    }

    parent.find(".btn-select").click(readingBtnSelect);
    parent.find(".multiple-add").click(multipleAdd);
    parent.find(".multiple-choice").click(multipleRemove);
}

//相应式创建一个题目modal
function createTopicModal() {
    //重置answer
    answer=4;
    //在modal处创建一个modal
    var modalDiv=$("#modal-create");
    var modal=document.createElement("div");
    modal.id="modal-"+modalId;
    modal.innerHTML=topicModal(modalId);
    modalDiv.prepend(modal);

    //初始化选择题选项
    multipleInit(modal);

    //载入并显示modal
    $("#topic-"+modalId).modal();
    $("#topic-"+modalId).modal("show");

    //绑定modal事件
    $("#topic-"+modalId).on('hidden.bs.modal',function () {
        modal.remove();
        editorArray.pop();
        modalId--;
    });
    $("#topic-"+modalId).find(".submit").click(newSubmit);

    //modal唯一标识自增
    modalId++;
}

//新建题目提交
function newSubmit() {
    //表单正确性检测
    if(!validationMultiple($("#topic-"+(modalId-1)))){
        return;
    }

    var text=editor.document.getBody().getText();
    if(text.length>6){
        text=text.substring(0,6)+"……";
    }
    appendTable(text);
    //清空删除事件
    $("#topic-"+(modalId-1)).off().on('hidden.bs.modal');
    $("#topic-"+(modalId-1)).modal("hide");

    //重新定义提交事件
    $("#topic-"+(modalId-1)).find(".submit").html("修改");
    $("#topic-"+(modalId-1)).find(".submit").unbind();
    $("#topic-"+(modalId-1)).find(".submit").click(editorSubmit);
}

//编辑题目提交
function editorSubmit() {
    //获取相应id
    var id=$(this).parents(".modal").attr("id").substring(6);

    //检验表单
    if(!validationMultiple($("#topic-"+id))){
        return;
    }

    console.log(editorArray);

    //获取CKEDITOR中的值
    var editor=editorArray[id];
    var message=editor.document.getBody().getText();
    if(message.length>6){
        message=message.substring(0,6)+"……";
    }
    $("#tr-"+id+" td").get(1).innerHTML=message;

    //隐藏modal
    $("#topic-"+id).modal("hide");
}

//重置answer
function setAnswer(eleId) {
    answer=$(eleId).find("input[type='text']").length;
}

/**
 *  题目modal
 * @param modalId modal的顺序标记，用于生成页面的唯一modalId
 * @returns {string} 生成modal的html代码
 */
function topicModal(modalId) {
    //选择题构造
    var multipleString="<div class='form-group'>\n" +
        "                <label class='col-sm-2 control-label'><h3>选择题</h3></label>\n" +
        "                <div class='col-sm-10' style='padding: 0px 15px'>\n" +
        "                    <div class='border-circle'>\n" +
        "                        <h3 class='text-center'>选择题答案</h3>\n" +
        "                        <div class='multiple-answers'>\n" +
        "                        </div>\n" +
        "                        <div class='set-select'  style='padding-left: 20px'>\n" +
        "                            <button type='button' class='btn btn-info multiple-add'>+添加选项</button>\n" +
        "                        </div>\n" +
        "                    </div>\n" +
        "                </div>\n" +
        "            </div>";
    
    return "<div class='modal fade' id='topic-"+modalId+"' tabindex='-1' role='dialog'>\n" +
        "    <div class='modal-dialog modal-lg' role='document'>\n" +
        "        <div class='modal-content'>\n" +
        "            <div class='modal-header'>\n" +
        "                <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>\n" +
        "                <h4 class='modal-title'>新增题目</h4>\n" +
        "            </div>\n" +
        "            <div class='modal-body'>\n" +
        "                <input type='hidden' name='args["+modalId+"][questiontype]' class='questiontype' value='1'>\n" +
        "                <!--题目内容-->\n" +
        "                <div class='form-group'>\n" +
        "                    <label class='col-sm-2 control-label'>\n" +
        "                        <h3>题目内容</h3>\n" +
        "                    </label>\n" +
        "                    <div class='col-sm-10'>\n" +
        "                            <textarea name='args["+modalId+"][question]' rows='10' id='topic-container-"+modalId+"' cols='80'>\n" +
        "                            </textarea>\n" +
        "                        <script>\n" +
        "                            editor=CKEDITOR.replace('topic-container-"+modalId+"');\n" +
        "                            editorArray.push(editor);\n" +
        "                        </script>\n" +
        "                    </div>\n" +
        "                </div>\n" +
        "                <!--答案-->\n" +
        "                <div class='answer-block'>\n" +multipleString+
        "                </div>\n" +
        "                <!--详解-->\n" +
        "                <div class='form-group'>\n" +
        "                    <label class='col-sm-2 control-label'><h3>详解</h3></label>\n" +
        "                    <div class='col-sm-10'>\n" +
        "                                <textarea name='args["+modalId+"][questiondescribe]' rows='4' id='answer-"+modalId+"' cols='80'>\n" +
        "                                </textarea>\n" +
        "                        <script>\n" +
        "                            CKEDITOR.replace('answer-"+modalId+"');\n" +
        "                        </script>\n" +
        "                    </div>\n" +
        "                </div>\n" +
        "                <div class='clearfix'></div>\n" +
        "            </div>\n" +
        "            <div class='modal-footer'>\n" +
        "                <button class='btn btn-info submit' type='button'>增加</button>\n" +
        "                <button class='btn btn-default' type='button' data-dismiss='modal'>取消</button>\n" +
        "            </div>\n" +
        "        </div>\n" +
        "    </div>\n" +
        "</div>";
}

//在table处写入一个题目
function appendTable(message) {
    var html="<tr id='tr-"+(modalId-1)+"'>\n" +
        "    <td>选择题</td>\n" +
        "    <td>"+message+"</td>\n" +
        "    <td>\n" +
        "        <button class='btn btn-sm btn-primary' type='button' data-toggle='modal' data-target='#topic-"+(modalId-1)+"' onclick='setAnswer(\"#topic-"+(modalId-1)+"\")'>修改</button>\n" +
        "        <button class='btn btn-sm btn-danger' type='button'>删除</button>\n" +
        "    </td>\n" +
        "</tr>";

    $("table tbody").append(html);
    $("#tr-"+(modalId-1)).find(".btn-danger").click(removeFromTable);
}

//在table处删除一个题目
function removeFromTable() {
    console.log($(this));
    var id=$(this).parents("tr").attr("id").substring(3);
    $(this).parents("tr").remove();
    $("#modal-"+id).remove();
}